<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${pageTitle}"></title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div data-th-replace="common/functionDepict"></div>
        <div class="row">
            <div class="col-sm-12">
                <div class="pt10">
                    <p class="fs14"><em class="welcom-icon"></em><span class="ml5">欢迎回来，今天是【<font id="show-time">0000-00-00 00:00:00 星期一 上午</font>】,系统基础数据如下</p>
                </div>
                <div class="pt10">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>基本数据统计<small class="m-l-sm">（展示基本的数据统计）</small></h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                            <div class="row">
                                <div class="iv-data-item">
                                    <a href="">
                                        <div class="iv-data-item-bx iv-data-item-bx-1">
                                            <aside class="iv-data-icon"><em>&nbsp;</em></aside>
                                            <div class="text-right">
                                                <h3><span class="c-fff">注册用户总数</span></h3>
                                                <div class="c-fff"><span class="fs24" id="sumUserNum">0</span><small class="fs12 ml5">人</small></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="iv-data-item">
                                    <a href="">
                                        <div class="iv-data-item-bx iv-data-item-bx-2">
                                            <aside class="iv-data-icon"><em>&nbsp;</em></aside>
                                            <div class="text-right">
                                                <h3><span class="c-fff">付费用户总数</span></h3>
                                                <div class="c-fff"><span class="fs24" id="buyUserNum">0</span><small class="fs12 ml5">人</small></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="iv-data-item">
                                    <a href="">
                                        <div class="iv-data-item-bx iv-data-item-bx-3">
                                            <aside class="iv-data-icon"><em>&nbsp;</em></aside>
                                            <div class="text-right">
                                                <h3><span class="c-fff">课程总数</span></h3>
                                                <div class="c-fff"><span class="fs24" id="sumCourseNum">0</span><small class="fs12 ml5">门</small></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="iv-data-item">
                                    <a href="">
                                        <div class="iv-data-item-bx iv-data-item-bx-4">
                                            <aside class="iv-data-icon"><em>&nbsp;</em></aside>
                                            <div class="text-right">
                                                <h3><span class="c-fff">总直播课节</span></h3>
                                                <div class="c-fff"><span class="fs24" id="liveNodeNum">0</span><small class="fs12 ml5">节</small></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="iv-data-item">
                                    <a href="">
                                        <div class="iv-data-item-bx iv-data-item-bx-5">
                                            <aside class="iv-data-icon"><em>&nbsp;</em></aside>
                                            <div class="text-right">
                                                <h3><span class="c-fff">试题总数</span></h3>
                                                <div class="c-fff"><span class="fs24" id="sumQuestionNum">0</span><small class="fs12 ml5">道</small></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="iv-data-item">
                                    <a href="">
                                        <div class="iv-data-item-bx iv-data-item-bx-6">
                                            <aside class="iv-data-icon"><em>&nbsp;</em></aside>
                                            <div class="text-right">
                                                <h3><span class="c-fff">试卷总数</span></h3>
                                                <div class="c-fff"><span class="fs24" id="sumExamNum">0</span><small class="fs12 ml5">套</small></div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>运营概况</h5>
                    <div class="pt10 text-right">
                        <form id="dua-form" role="form" class="form-inline">
                            <div class="form-group" style="margin-bottom: 10px">
                                <input placeholder="开始时间" id="DUA_begTime" name="begTime" class="laydate-icon form-control layer-date" type="text">
                                ——
                                <input placeholder="结束时间" id="DUA_endTime" name="endTime" class="laydate-icon form-control layer-date" type="text">
                            </div>
                            <button class="btn btn-w-m btn-primary dua"   type="button" style="margin-bottom: 10px">查询</button>
                        </form>
                    </div>
                </div>
                <div class="ibox-content">
                    <section class="transaction-state-list__wrap">
                        <section class="transaction-state-item sItem-2">
                            <div class="clearfix mt5">
                                <section class="iv-data-item">
                                    <span class="fs12 c-999">注册转化率</span>
                                    <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="注册转化率，自然注册总人数/UV*100%" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                    <aside class="mt5">
                                        <strong class="fs24 c-000 vam" id="registerConversionRate">0%</strong>
                                    </aside>
                                </section>
                                <section class="iv-data-item">
                                    <span class="fs12 c-999">购买转化率</span>
                                    <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="订单转化率，成功订单总数/UV*100%" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                    <aside class="mt5">
                                        <strong class="fs24 c-000 vam" id="orderConversionRate">0%</strong>
                                    </aside>
                                </section>
                                <section class="iv-data-item">
                                    <span class="fs12 c-999">日活跃DUA</span>
                                    <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="单日登录用户数/总注册人数*100%" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                    <aside class="mt5">
                                        <strong class="fs24 c-000 vam" id="activeDUA">0%</strong>
                                    </aside>
                                </section>
                            </div>
                        </section>
                        <section class="transaction-state-item sItem-3">
                            <div class="clearfix mt5">
                                <section class="iv-data-item">
                                    <span class="fs12 c-999">7日DUA</span>
                                    <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="INTERVAL 7 DAY 间隔天数" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                    <aside class="mt5">
                                        <strong class="fs24 c-000 vam" id="sevenDayConversion">0%</strong>
                                    </aside>
                                </section>
                                <section class="iv-data-item">
                                    <span class="fs12 c-999">30日DUA</span>
                                    <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="INTERVAL 30 DAY 间隔天数" data-original-title="" title=""><i class="fa fa-exclamation-circle"></i></span>
                                    <aside class="mt5">
                                        <strong class="fs24 c-000 vam" id="thirtyDayConversion">0%</strong>
                                    </aside>
                                </section>
                            </div>
                        </section>
                    </section>
                </div>
            </div>
            <div class="ibox-content">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>网站注册量曲线</h5>
                        <div class="pt10 text-right">
                            <form id="reg-form" role="form" class="form-inline">
                                <div class="form-group" style="margin-bottom: 10px">
                                    <input placeholder="开始时间" id="reg_begTime" name="begTime" class="laydate-icon form-control layer-date" type="text">
                                    ——
                                    <input placeholder="结束时间" id="reg_endTime" name="endTime" class="laydate-icon form-control layer-date" type="text">
                                </div>
                                <button class="btn btn-w-m btn-primary reg"   type="button" style="margin-bottom: 10px">查询</button>
                            </form>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" style="height: 340px;" id="reg-echarts-line-chart"></div>
                    </div>
                </div>
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>网站订单量曲线</h5>
                        <div class="pt10 text-right">
                            <form id="order-form" role="form" class="form-inline">
                                <div class="form-group" style="margin-bottom: 10px">
                                    <input placeholder="开始时间" id="order_begTime" name="begTime" class="laydate-icon form-control layer-date" type="text">
                                    ——
                                    <input placeholder="结束时间" id="order_endTime" name="endTime" class="laydate-icon form-control layer-date" type="text">
                                </div>
                                <button class="btn btn-w-m btn-primary order"   type="button" style="margin-bottom: 10px">查询</button>
                            </form>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" style="height: 340px;" id="order-echarts-line-chart"></div>
                    </div>
                </div>

                <div class="ibox">
                    <div class="row">
                       <!-- <div class="col-sm-6">
                            <div class="float-e-margins">
                                <div class="ibox-title">
                                    <h5>会员注册地域分布</h5>
                                </div>
                                <div class="ibox-content">
                                    <div class="echarts" style="height:580px" id="user-echarts-map-chart"></div>
                                </div>
                            </div>
                        </div>-->
                        <div class="col-sm-6">
                            <div class="float-e-margins">
                                <div class="ibox-title">
                                    <h5>会员访问设备分布</h5>
                                </div>
                                <div class="ibox-content">
                                    <div class="echarts" style="height: 580px" id="user-echarts-pie-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-th-replace="layout/head-footer"></div>
    <script th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/admin/libs/plugins/echarts/china.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/admin/business/count/time.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/admin/business/count/base-statistics.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>
